<template>
	<view class="bar" >
		<view class="btns">
			<view class="words md4Text">
				常用语
			</view>
			<input type="text"  placeholder="请输入…" v-model="msg" class="putIn md8Text" @input="getMsg"/>
			<view class="more">
				<image src="../../../static/imgs/detail/express.png" mode="" @click="showEmojis"></image>
				<image src="../../../static/imgs/detail/add.png" mode="" v-if="msg==''" @click="showAdds"></image>
				<view class="send md4Text" v-else @click="sendOut">发送</view>
			</view>
		</view>
		
		<view class="express" v-if="isShow">
			<view class="md4Text all">
				全部表情
			</view>
			
			<view class="emojis">
				<view class="emoji" v-for="item in emojis">
					{{item}}
				</view>
			</view>
		</view>
		
		<view class="addFuncs" v-if="isAdd">
			<view class="fun">
				<image src="../../../static/imgs/detail/photo.png" mode=""></image>
				<view class="name smTitle">
					拍摄
				</view>
			</view>
			
			<view class="fun">
				<image src="../../../static/imgs/detail/image.png" mode=""></image>
				<view class="name smTitle">
					照片
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				 isShow:false,
				 isAdd:false,
				msg:'',
				emojis:['😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃','😉','😊','😇','🥰','😍','🤩','😘','😗']
			}
		},
		methods:{
			getMsg(enent){
				this.msg = event.target.value;
				
			},
			
			sendOut(){
				console.log('信息已发送');
				this.$emit('sendMsg',this.msg);
				this.msg='';
			},
			
			showEmojis(){
				this.isAdd = false;
				this.isShow = !this.isShow;
			},
			
			showAdds(){
				
				this.isShow = false;
				this.isAdd = !this.isAdd;
			}
		}
	}
</script>

<style scoped lang="less">
	.bar{
		width: 750upx;
		// height: 116upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		box-shadow: 0px -10px 60px rgba(162, 162, 162, 0.16);
		opacity: 1;
		
		.btns{
			width: 100%;
			height: 116upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 48upx;
			.more{
				display: flex;
				image{
					width: 48upx;
					height: 48upx;
					margin-left: 20upx;
				}
				
				.send{
					width: 100upx;
					height: 48upx;
					background: linear-gradient(180deg, #3465B1 0%, #789AD1 100%);
					border-radius: 8upx;
					color: #FFFFFF;
					text-align: center;
					line-height:48upx;
					margin-left: 15upx;
				}
			}
			
			.words{
				width: 100upx;
				height: 48upx;
				text-align: center;
				line-height:48upx;
				background: linear-gradient(180deg, #3465B1 0%, #789AD1 100%);
				opacity: 1;
				border-radius: 8upx;
				color: #FFFFFF;
			}
			
			.putIn{
				margin-left: 20upx;
				color: #A2A2A2;
				
			}
		}
		
		.express{
			width: 100%;
			padding:0 48upx;
			
			.all{
				font-weight: bold;
			}
			
			.emojis{
				width: 100%;
				display: grid;
				grid-template-columns:repeat(7,1fr);
			
			.emoji{
				font-size: 42upx;
				text-align: center;
				padding: 25upx 0;
				
			}
			}
		}
		
		.addFuncs{
			width: 100%;
			padding: 48upx;
			background: #FBFBFB;
			display: flex;
			height: 336upx;
			.fun{
				width: 96upx;
				height: 96upx;
				margin-right: 52upx;
				.name{
					width: 100%;
					text-align: center;
				}
				image{
					width: 96upx;
					height: 96upx;
				}
			}
			
		}
	}
</style>
